<template>
    <view>
        <!-- <custom-nav TitleText="余额"></custom-nav> -->
        <!-- 余额 -->
        <view>
            <view class="img">
                <image src="../../static/img/myhome/yuer-bg@3x.png">
                </image>
                <view class="money">
                    <text>我的环保金余额</text>
                    <view class="myrmb"><span><span>￥</span>{{balance}}</span></view>
                    <text>累计收入: {{money}}</text>
                    <button type="default" size="mini" class="button" @click="Recharge"><span>立即提现</span></button>
                </view>
            </view>
        </view>
        <view>
            <!-- 选项卡 -->
            <ul class="ul">
                <li :class="{active: activeIndex === index}" @click="change(item, index)" v-for="(item, index) in tabs"
                    :key="item">
                    {{item.title}}
                </li>
            </ul>
        </view>
        <!-- 充值记录 -->
        <view class="record">
            <Balrecord :record="list"></Balrecord>
        </view>
    </view>
</template>

<script>
    import Balrecord from './Balrecord.vue'

    export default {
        components: {
            Balrecord
        },
        data() {
            return {
                activeIndex: 0,
                tabs: [{
                    id: 0,
                    title: '全部记录',
                },{
                    id: 2,
                    title: '收入记录',
                },{
                    id: 1,
                    title: '消费记录',
                }],
                list: [],
                money: '',
                balance: '',
                pamams: {
                    type: '',
                }
            }
        },
        onLoad() {
            this._getuserBalance();
        },
        methods: {
            change(item, index) {
                this.activeIndex = index;
                this.pamams.type = item.id;
                this._getuserBalance();
            },
            leftback() {
                uni.navigateBack({
                    delta: 1
                })
            },
            Recharge() {
                uni.navigateTo({
                    url: 'Withdrawal'
                })
            },
            _getuserBalance() {
                uni.showLoading({
                    title: '加载中'
                });
                if(this.$u.test.isEmpty(this.pamams.type)) {
                    this.pamams = {};
                }
                this.$u.api.getuserBalance(this.pamams).then(res => {
                    this.money = res.money;
                    this.list = res.list;
                    this.balance = res.balance;
                    uni.hideLoading();
                }).catch(e => {
                    uni.hideLoading();
                })
            },
        },
        onPullDownRefresh() {
            uni.stopPullDownRefresh()
        }
    }
</script>

<style lang="scss" scoped>
    .img {
        position: relative;
        background-color: #eee;

        image {
            width: 690rpx;
            height: 262rpx;
            margin: 30rpx 30rpx 0;
        }

        .money {
            position: absolute;
            top: 20rpx;
            left: 15rpx;
            width: 690rpx;
            height: 220rpx;

            .myrmb {
                position: absolute;
                bottom: 37rpx;
                left: 75rpx;

                span:nth-child(1) {
                    font-size: 70rpx;
                    color: #ffffff;

                    span {
                        font-size: 40rpx;
                        color: #ffffff;
                    }
                }
            }

            text:nth-child(1) {
                position: absolute;
                top: 53rpx;
                left: 81rpx;
                font-size: 28rpx;
                line-height: 29rpx;
                color: #ffffff;
            }

            text:nth-child(3) {
                position: absolute;
                top: 53rpx;
                right: 34rpx;
                font-size: 28rpx;
                color: #ffe7d8;
            }

            .button {
                position: absolute;
                right: 30rpx;
                bottom: 43rpx;
                width: 190rpx;
                height: 70rpx;
                line-height: 70rpx;
                background-image: linear-gradient(90deg,
                        #ffca4b 0%,
                        #ff6000 100%),
                    linear-gradient(#ff5400,
                        #ff5400);
                background-blend-mode: normal,
                    normal;
                box-shadow: 0rpx 15rpx 30rpx 0rpx rgba(255, 68, 1, 0.25);
                border-radius: 35rpx;

                span {
                    color: #FFFFFF;
                }
            }
        }
    }

    .ul {
        display: flex;
        justify-content: space-around;
        height: 88rpx;
        text-align: center;
        border-bottom: 1px solid #EEEEEE;

        li {
            transition: all 0.3s;
            margin: 14rpx 0;
            width: 161rpx;
            height: 60rpx;
            line-height: 60rpx;
            border-radius: 30rpx;
            // border: 1px solid black;

            &.active {
                background-color: #1bc078;
                color: #FFFFFF;
            }
        }
    }

    .record {
        margin: 30rpx;
    }
</style>
